<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>商户交易查询</title>
		<link rel="stylesheet" href="../css/pagination.css" />
		<link rel="stylesheet" href="../css/mui.min.css"/>
		<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/jquery.pagination.js" ></script>
		<script type="text/javascript" src="../js/layer/layer.js"></script>
		<script type="text/javascript" src="../js/layui/layui.js" ></script>
		<script type="text/javascript" src="../js/layui/lay/modules/laydate.js" ></script>
		<link rel="stylesheet" href="../js/layer/skin/layer.css" id="layuicss-skinlayercss">
		<style>
			body{font-family:"微软雅黑"; background: #DEDEDE;}
			.mui-card{border: none;}
			.M-box3{margin: 1em auto;}
			.M-box3 span:first-child{display: block; margin-left: 18%;}
			.M-box3 a:first-child{margin-left: 5%;}
		</style>
	</head>
	<body>
		<div class="mui-content" style="background: #DEDEDE; margin-top: 5px;">
			<div class="mui-control-content mui-active" hidden="hidden">
				<div class="mui-card" style="margin-bottom: 5px;">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-collapse">
							<a class="mui-navigate-right" href="#">查询条件</a>
							<div class="mui-collapse-content">
								<form class="mui-input-group">
									<div class="mui-input-row">
										<label>商户号</label>
										<select class="mui-btn"  id="number" style="width: 65%; padding-left: 16%;">
											<option value="">请选择商户号</option>
										</select>
									</div>
									<div class="mui-input-row">
										<label>开始时间</label>
										<input class="layui-input" id="dateFrom" readonly="readonly" placeholder="请选择开始时间" onclick="layui.laydate({elem: this, istime: true, format: 'YYYY-MM-DD'})">
									</div>
									<div class="mui-input-row">
										<label>结束时间</label>
										<input class="layui-input" id="dateTo" readonly="readonly" placeholder="请选择结束时间"  onclick="layui.laydate({elem: this, istime: true, format: 'YYYY-MM-DD'})">
									</div>
									<div class="mui-input-row">
										<label>交易类型</label>
										<select class="mui-btn"  id="type" style="width: 65%; padding-left: 21%;">
											<option value="all">全部</option>
											<option value="card">银联卡</option>
											<option value="13">微信</option>
											<option value="12">支付宝</option>
											<option value="cash">现金</option>
										</select>
									</div>
									<div class="mui-button-row">
										<button class="mui-btn mui-btn-primary" type="button" id="search_submit">查询</button>
									</div>
								</form>
							</div>
						</li>
					</ul>
				</div>
				<div class="mui-card">
					<div class="mui-card-content empty_data" hidden="hidden">
						<img src="../img/empty.png" alt="" width="100%"/>
					</div>
					<ul class="mui-table-view" id="item_ul">
						
					</ul>
					<div class="M-box3" id="page" hidden="hidden">
						
					</div>
				</div>
			</div>
		</div>
	</body>
	
	<script>
		var openID;
		var page_num = 0;
		$(function(){
			openID = GetQueryString('openID');
			var layerdate = layui.laydate;
	        
			getMchs();
			$(document).on('click','#search_submit',function(){
				page_num = 0;
				infoList(1);
			})
		})
		
		//获取商户号
		function getMchs(){
			$.ajax({
				url : '../agent/getMchs',
				type : 'post',
				data : {
					'openID' : openID
				},
				success : function(res){
					var agents = res.list;
					var options = '';
					for(var i in agents){
						if(i == 0){
							options += '<option value="'+agents[i].mch_id+'">'+agents[i].mch_id+'</option>';
						}else{
							options += '<option value="'+agents[i].mch_id+'">'+agents[i].mch_id+'</option>';
						}
					}
					if(agents.length > 1){
						$('#number').append($(options));
					}else{
						$('#number').html(options);
					}
					
				},
				error : function(){
					layer.msg('请求错误，请稍后再试！');
				}
			})
		}
		
		//查询
		function infoList(pageNum){
			if($('#number').val() == '请选择商户号' || $('#number').val() == ''){
				layer.msg('请选择商户号!');
				return;
			}
			if($('#dateFrom').val().trim() == ''){
				layer.msg('请选择开始时间！')
				return;
			}
			if($('#dateTo').val().trim() == ''){
				layer.msg('请选择结束时间！')
				return;
			}
			var pageCount = 0;
			$.ajax({
				url: '../agent/getOrders',
				type: 'post',
				data: {
					'number' : $('#number').val(),
					'dateFrom' : $('#dateFrom').val(),
					'dateTo' : $('#dateTo').val(),
					'type': $('#type').val(),
					'page' : pageNum
				},
				success: function(res){
					var data = res.list;
					pageCount = parseInt(res.count);
					if(pageCount == 1){
						page_num = 0;
					};
					
	                var str = '';
	                $('.empty_data').hide();
	                $('#item_ul').empty();
	                if(data.length > 0){
	                	for(var i in data){
		                	str += '<li class="mui-table-view-cell projectList_li">';
		                	str += '	<div class="mui-table">';
		                	str += '		<div class="mui-table-cell mui-col-xs-10">';
		                	str += '			<h6>时间：'+data[i].orderDate+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;金额：'+data[i].price+'</h6>';
		                	str += '			<h6 class="mui-ellipsis">手续费：'+data[i].feePrice+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;实际到账：'+data[i].realPrice+'</h6>';
		                	str += '		</div>';
		                	str += '	</div>';
		                	str += '</li>';
		                }
		                $('#item_ul').html(str);
	                }else{
	                	$('.empty_data').show();
	                }
	                
				},
				complete: function(){
					if(pageCount == 1 || pageCount == 0){
						page_num = 0;
						$('#page').hide();
					}else{
						$('#page').show();
						if(page_num == 0){
							$('#page').pagination({
							    pageCount:pageCount,
							    coping:true,
							    homePage:'首页',
							    endPage:'末页',
							    prevContent:'上页',
							    nextContent:'下页',
							    count: 0,
							    callback:function(api){
							       infoList(api.getCurrent());
							    }
							});
						}
						page_num ++;
					}
					
				}
			})
		}
		
		/* 获取url后的字符串 */
	    function GetQueryString(name) {
	        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
	        var r = window.location.search.substr(1).match(reg);
	        if (r != null) {
	            return (r[2]);
	        }
	        return null;
	    }
	</script>
</html>
